<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'}"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
    <!-- Reset Stylesheet -->
    <link rel="stylesheet" href="resources/css/reset.css" type="text/css"
          media="screen" />
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="resources/css/style.css" type="text/css"
          media="screen" />
    <link rel="stylesheet" href="resources/css/invalid.css" type="text/css"
          media="screen" />

    <!--                       Javascripts                       -->
    <!-- jQuery -->
    <script type="text/javascript"
            src="resources/scripts/jquery-1.8.3.min.js"></script>
    <!-- jQuery Configuration -->
    <script type="text/javascript"
            src="resources/scripts/simpla.jquery.configuration.js"></script>

    <!-- dialog 弹窗的依赖 -->
    <script src="resources/widget/dialog/jquery-ui-1.9.2.custom.min.js"></script>
    <link rel="stylesheet" href="resources/widget/dialog/jquery-ui.min.css" type="text/css" media="screen" />

    <!-- 百度地图 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=KS2j9ph1CQkKMpmidRlEdlSp3mR6nO6S"></script>

    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>

    <script>
        /**
         * 打开百度地图的弹出框
         */
        function openMap(){

            initMap();

            $("#baiduMap").dialog({
                title: "百度地图",
                width: 800,
                height: 600,
                modal: true
            });
        }

        /**
         * 初始化百度地图
         */
        function initMap(){

            //获得当前城市
            var cityName = $("select[name='cid'] option:selected").text();

            var map = new BMap.Map("container");
            map.centerAndZoom(cityName, 11);
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

            //逆地址解析
            var geoc = new BMap.Geocoder();

            //设置地图的点击事件
            map.addEventListener('click', function (e) {
                var point = e.point;

                //清空覆盖物
                map.clearOverlays();
                // 创建标注
                var marker = new BMap.Marker(point);
                //设置动画
                marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                // 将标注添加到地图中
                map.addOverlay(marker);

                geoc.getLocation(point, function(rs){
                    var addComp = rs.addressComponents;
                    var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                    $("#address").val(address);
                })


                $("#lon").val(point.lng);
                $("#lat").val(point.lat);
            });

        }
    </script>

</head>
<body>
<div id="main-content">
    <div class="content-box">
        <div class="content-box-content">
            <div class="tab-content default-tab" id="tab2">
                <form action="/system/hotal/insert" method="post" enctype="multipart/form-data">
                    <fieldset>
                        <!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
                        <p>
                            <label>酒店名称</label> <input
                                class="text-input small-input" type="text"
                                name="hotalName" />
                        </p>
                        <p>
                            <label>酒店图片</label> <input
                                class="text-input medium-input datepicker" type="file"
                                name="file" />
                        </p>

                        <p>
                            <label>酒店类型</label>
                            <select name="type" class="small-input">
                                <option value="0">快捷酒店</option>
                                <option value="1">商务酒店</option>
                                <option value="2">主题酒店</option>
                                <option value="3">星级酒店</option>
                            </select>
                        </p>

                        <p>
                            <label>关键词</label> <input
                                class="text-input medium-input datepicker" type="text"
                                name="keyword" />
                        </p>

                        <p>
                            <label>所在城市</label>
                            <select name="cid" class="small-input">
                                <option th:each="city : ${citys}" th:value="${city.id}" th:text="${city.cityName}">快捷酒店</option>
                            </select>
                        </p>

                        <p>
                            <label>行政区域</label> <input
                                class="text-input medium-input datepicker" type="text"
                                name="regstr" />
                        </p>

                        <p>
                            <label>百度地图</label>
                            <button type="button" class="mybutton" onclick="openMap();">打开地图</button>
                        </p>

                        <p>
                            <label>经度</label> <input id="lon"
                                class="text-input small-input" type="text"
                                name="lon" />
                        </p>
                        <p>
                            <label>纬度</label> <input id="lat"
                                class="text-input small-input" type="text"
                                name="lat" />
                        </p>
                        <p>
                            <label>酒店地址</label> <input id="address"
                                class="text-input small-input" type="text"
                                name="address" />
                        </p>

                        <p>
                            <label>星级</label> <input
                                class="text-input small-input" type="text"
                                name="star" />
                        </p>

                        <p>
                            <label>品牌</label> <input
                                class="text-input small-input" type="text"
                                name="brand" />
                        </p>

                        <p>
                            <label>开业时间</label> <input
                                class="text-input small-input" type="date"
                                name="openTime" />
                        </p>

                        <p>
                            <label>酒店描述</label>
                            <textarea class="text-input textarea wysiwyg"
                                      name="hotalInfo" cols="79" rows="15"></textarea>
                        </p>

                        <p>
                            <input class="mybutton" type="submit" value="提交" />
                        </p>
                    </fieldset>
                    <div class="clear"></div>
                    <!-- End .clear -->
                </form>
            </div>
            <!-- End #tab2 -->
        </div>
        <!-- End .content-box-content -->
    </div>
</div>
<!-- End #main-content -->
<div id="baiduMap" style="display: none">
    <!-- 百度地图 -->
    <div id="container"></div>
</div>


</body>
</html>